<template>
  <div class="MyTravel">

    <v-layout :class="{'Finance-form':isActive}">
      <h2>Verify</h2>
      <v-layout :class="{'pending-form-info':isActive}">
        <div class="pending-form-info-left">
          <div class="pending-form-info-block">
            <label>Office</label>
            <v-select :items="Officeitems"
                      solo
                      label="SHA"></v-select>
          </div>
          <div class="pending-form-info-block">
            <label>Request No.</label>
            <v-text-field label=""></v-text-field>
          </div>
        </div>
        <div>
          <v-btn v-bind="attrs"
                 v-on="on"
                 :class="{'Search-btn':isActive}">Search
          </v-btn>
        </div>
      </v-layout>
      <div class="record-paging">
        <p>1 record(s)</p>
        <div class="paging">
          <div class="d-flex col-sm-2">
            <v-select :items="items"
                      solo
                      label="1"></v-select>
          </div>
          <p>of 1 page(s)</p>
          <v-btn :class="{'refresh-btn':isActive}"></v-btn>
        </div>
        <p>Maximum 500 records displayed per page</p>
      </div>
      <v-data-table class="table form-table MyTravel-form-table"
                    :hide-default-footer='true'
                    :headers="headers"
                    :disable-sort="true"
                    :items-per-page="1000"
                    :items="desserts">
        <template v-slot:header.add="{ header }"></template>

        <template v-slot:item.EvidenceFrom="props">
          <v-edit-dialog :return-value.sync="props.item.EvidenceFrom"
                         @save="save"
                         @cancel="cancel"
                         @click:outside="save1"
                         @open="open"
                         @close="close">
            {{ props.item.EvidenceFrom }}
            <template v-slot:input>
              <v-select v-model="props.item.EvidenceFrom"
                        :items="items"
                        dense></v-select>
            </template>
          </v-edit-dialog>
        </template>
        <template v-slot:item.RequestStatus="props">
          <v-edit-dialog :return-value.sync="props.item.RequestStatus"
                         @save="save"
                         @cancel="cancel"
                         @click:outside="save1"
                         @open="open"
                         @close="close">
            {{ props.item.RequestStatus }}
            <template v-slot:input>
              <v-select v-model="props.item.RequestStatus"
                        :items="items"
                        dense></v-select>
            </template>
          </v-edit-dialog>
        </template>
        <template v-slot:item.ClientJobOffice="props">
          <v-edit-dialog :return-value.sync="props.item.ClientJobOffice"
                         @save="save"
                         @cancel="cancel"
                         @click:outside="save1"
                         @open="open"
                         @close="close">
            {{ props.item.ClientJobOffice }}
            <template v-slot:input>
              <v-select v-model="props.item.ClientJobOffice"
                        :items="items"
                        dense></v-select>
            </template>
          </v-edit-dialog>
        </template>
        <template v-slot:item.territory="props">
          <v-edit-dialog :return-value.sync="props.item.territory"
                         @save="save"
                         @cancel="cancel"
                         @click:outside="save1"
                         @open="open"
                         @close="close">
            {{ props.item.territory }}
            <template v-slot:input>
              <v-select v-model="props.item.territory"
                        :items="items"
                        dense></v-select>
            </template>
          </v-edit-dialog>
        </template>
        <template v-slot:item.province="props">
          <v-edit-dialog :return-value.sync="props.item.province"
                         @save="save"
                         @cancel="cancel"
                         @open="open"
                         @close="close">
            {{ props.item.province }}
            <template v-slot:input>
              <v-select v-model="props.item.province"
                        :items="items"
                        dense></v-select>
            </template>
          </v-edit-dialog>
        </template>
        <template v-slot:item.accomodationCity="props">
          <v-edit-dialog :return-value.sync="props.item.accomodationCity"
                         @save="save"
                         @cancel="cancel"
                         @open="open"
                         @close="close">
            {{ props.item.accomodationCity }}
            <template v-slot:input>
              <v-select v-model="props.item.accomodationCity"
                        :items="items"
                        dense></v-select>
            </template>
          </v-edit-dialog>
        </template>
        <template v-slot:item.hotelName="props">
          <v-edit-dialog :return-value.sync="props.item.hotelName"
                         @save="save"
                         @cancel="cancel"
                         @open="open"
                         @close="close">
            {{ props.item.hotelName }}
            <template v-slot:input>
              <v-text-field v-model="props.item.hotelName"
                            label="Edit"
                            single-line
                            counter></v-text-field>
            </template>
          </v-edit-dialog>
        </template>

        <template v-slot:item.checkInDate="props">
          <v-edit-dialog :return-value.sync="props.item.checkInDate"
                         @save="save"
                         @cancel="cancel"
                         @open="open"
                         @close="close">
            {{ props.item.checkInDate }}
            <template v-slot:input>
              <v-date-picker v-model="props.item.checkInDate"
                             color="orange lighten-5"></v-date-picker>
            </template>
          </v-edit-dialog>
        </template>
        <template v-slot:item.checkOutDate="props">
          <v-edit-dialog :return-value.sync="props.item.checkOutDate"
                         @save="save"
                         @cancel="cancel"
                         @open="open"
                         @close="close">
            {{ props.item.checkOutDate }}
            <template v-slot:input>
              <v-date-picker v-model="props.item.checkOutDate"
                             color="orange lighten-5"></v-date-picker>
            </template>
          </v-edit-dialog>
        </template>
      </v-data-table>
    </v-layout>
  </div>
</template>
<script>
  export default {
    data: () => ({
      isActive: true,
      dialog: false,
      admins: [
        'Management',
        'Settings',
      ],
      cruds: [
        'Create',
        'Read',
        'Update',
        'Delete',
      ],
      selectedItem: 1,
      headers: [
        {text: 'Request No.', value: 'RequestNo.'},
        {text: 'Evidence from.', value: 'EvidenceFrom'},
        {text: 'Request status', value: 'RequestStatus'},
        {text: 'Client - job - office', value: 'ClientJobOffice'},
        {text: 'Territory', value: 'Territory'},
        {text: 'Province', value: 'Province'},
        {text: 'Accomodation city', value: 'AccomodationCity'},
        {text: 'Hotel name', value: 'HotelName'},
        {text: 'Check-in date (DD/MM/YYYY)', value: 'checkInDate'},
        {text: 'Check-out date (DD/MM/YYYY)', value: 'checkOutDate'},
        {text: 'No. of nights', value: 'noOfNights'},
        {text: 'Daily travel allowance amount (RMB)', value: 'dailyAmount'},
        {text: 'Total travel allowance amount (RMB)', value: 'totalAmount'},
        {text: 'Creation date', value: 'creationDate'},
      ],
      items: ['1', '2', '3', '4'],
      Officeitems: ['SHA', 'BJ', 'HK'],
      Menuitems: [
        {title: 'My travel allowance requests'},
        {title: 'Requests for others'},
        {title: 'Approving requests'},
        {title: 'Finance operations'},
        {title: 'System configuration'},
        {title: 'Report centre'},
        {title: 'Home'},
      ],
    })
  }
</script>

